<script setup lang="ts">
import type { Component } from 'vue'
import { Icon } from '@vicons/utils'

defineOptions({ name: 'Icon' })

interface Props {
  icon: Component | null
  size?: string | number
  color?: string
}

const props = withDefaults(defineProps<Props>(), {
  icon: null,
  size: '',
  color: ''
})
</script>

<template>
  <Icon class="icon" :size="size" :color="color"
    ><component v-if="icon" :is="icon"></component
  ></Icon>
</template>

<style scoped>
.icon {
  align-items: center;
}
</style>
